<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<meta content="webkit" name="renderer" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <base href="<%=basePath%>">
    
    <title>基于WEB的人脸识别考勤系统——控制台</title>
    
	<!-- Bootstrap core CSS -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

	<link rel="stylesheet" href="layui/css/layui.css" media="all">
  </head>
  
  <body style="padding-top: 0px">
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    	<h1 class="page-header">时间表/<span class="text-muted"> Schedule</span>
    		<button class="layui-btn layui-btn-primary layui-btn-xs" id="refresh">
		  		<i class="layui-icon layui-icon-refresh-3"></i>刷新
		  	</button>
    	</h1>
	    <table class="layui-table" style="width: 600px;">
		  <colgroup>
			<col>
			<col>
			<col>
			<col>
			<col>
		  </colgroup>
		  <thead>
		    <tr>
		      <th>课程节数</th>
		      <th>检测开始时间</th>
		      <th>上课时间</th>
		      <th>下课时间</th>
		      <th>操作</th>
		    </tr> 
		  </thead>
		  <tbody id="timeView">
		  </tbody>
		</table>
    
    </div>

	<form class="layui-form" id="editView" lay-filter="editView" style="display: none; padding-top: 20px;">
		<div class="layui-form-item">
			<label class="layui-form-label" style="width: 90px;">当前节数</label>
			<div class="layui-input-inline" style="width: 150px;">
				<input name="lesson" id="lesson" autocomplete="off" class="layui-input layui-disabled" type="text" disabled>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label" style="width: 90px;">检测时间</label>
			<div class="layui-input-inline" style="width: 150px;">
				<input name="detection" id="detection" autocomplete="off" class="layui-input" type="text">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label" style="width: 90px;">上课时间</label>
			<div class="layui-input-inline" style="width: 150px;">
				<input name="start" id="start" autocomplete="off" class="layui-input" type="text">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label" style="width: 90px;">下课时间</label>
			<div class="layui-input-inline" style="width: 150px;">
				<input name="end" id="end" autocomplete="off" class="layui-input" type="text">
			</div>
		</div>
		<div class="layui-form-item" style="margin-top: 30px; text-align: center;">
		  	<button class="layui-btn" type="button" onclick="updatesubmit()">保存</button>
		  	<button class="layui-btn layui-btn-primary" type="button" onclick="layer.closeAll()">关闭</button>
		</div>
	</form>
	
    <script src="layui/layui.js"></script>
    <script src="js/jquery.min.js"></script>
    <script>
    var update;
    var updatesubmit;
    
    layui.use(['table', 'layer', 'laytpl', 'form'], function(){
    var table = layui.table;
    var layer = layui.layer;
    var laytpl = layui.laytpl;
    var form = layui.form;
    
    $('#refresh').on('click', function(){
		overloading();
		layer.msg('刷新完了');
	});
    
    overloading();
    
    updatesubmit = function updatesubmit(){
		$.ajax(
		{
			type:"post",
			url:"time/update.action",
			dataType:"json",
			data:{
				lesson: $('#lesson').val()
				,detection: $('#detection').val()
				,start: $('#start').val()
				,end: $('#end').val()
			},success : function(result){
				if(result.code == 1){
					layer.closeAll();
					overloading();
				}
				layer.msg(result.msg);
			}
		}); 
	}
    
    update = function update(lesson){
    	// 获取值
    	$.ajax(
		{
			type:"post",
			url:"time/getSchedulerByLesson.action",
			dataType:"json",
			data: {
				lesson: lesson
			},success : function(result){
				// 填充表单
				form.val("editView", {
					"lesson": result.lesson
					,"detection": result.detection
					,"start": result.start
					,"end": result.end
				})
			}
		});
		
    	// 弹窗
		layer.open({
			type: 1
			,title :'修改时间'
		    ,offset: 'auto'
			,area: ['270px', '370px']
			,id: 'edit' //防止重复弹出
			,content: $("#editView")
			,shade: 0 //不显示遮罩
		});
		
    }
    
    function overloading(){
	    $.ajax(
		{
			type:"post",
			url:"time/getScheduler.action",
			dataType:"json",
			success : function(result){
				// 渲染视图层
				var timeView = document.getElementById('timeView'); 
				var timeContent = document.getElementById('timeContent');
				laytpl(timeContent.innerHTML).render(result.data, function (html) {
					//赋值
					timeView.innerHTML = html;
				});
			}
		});
    }
    
    });
    </script>
    <script type="text/html" id="timeContent">
	{{#  layui.each(d, function(index, item){ }}
	<tr>
		<td>{{ item.lesson }}</td>
		<td>{{ item.detection }}</td>
		<td>{{ item.start }}</td>
		<td>{{ item.end }}</td>
		<td><button class="layui-btn layui-btn-primary layui-btn-xs" onclick="update({{ item.lesson }})">修改</button></td>
	</tr>
	{{#  }); }}
	</script>
  </body>
</html>
